<!--
 * @Description: 任务详情
 * @Author: Caroline
 * @Date: 2024-01-16 20:06:31
 * @LastEditTime: 2024-03-13 20:10:20
 * @LastEditors: Caroline
 * @FilePath: \Evaluation-web\src\views\task\detail\index.vue
-->
<template>
  <div class="common-footerFixed-box" v-loading="isLoading">
    <!-- 1、基础信息 -->
    <div class="common-info">
      <div class="common-info-title">基础信息</div>
      <el-row class="common-info-content" :gutter="8" justify="space-between">
        <el-col :span="6">
          <span class="label">任务名称：</span>
          <span class="value">{{ detail.name || "-" }}</span>
        </el-col>
        <el-col :span="6">
          <span class="label">关联项目：</span>
          <span class="value">{{ detail.projectName || "-" }}</span>
        </el-col>
        <el-col :span="6">
          <span class="label">测评人数：</span>
          <span class="value num">{{ detail.userNum || "-" }}</span>
        </el-col>
        <el-col :span="6">
          <span class="label">已接受人数：</span>
          <span class="value num">{{ detail.acceptNum || "-" }}</span>
        </el-col>
        <el-col :span="6">
          <span class="label">人员薪资：</span>
          <span class="value">{{ detail.salaryStr || "-" }}</span>
        </el-col>
        <el-col :span="6">
          <span class="label">任务状态：</span>
          <span class="value">{{ detail.statusStr || "-" }}</span>
        </el-col>
        <el-col :span="12">
          <span class="label">任务时间：</span>
          <span class="value num">{{ detail.assessTime || "-" }}</span>
        </el-col>
      </el-row>
    </div>

    <!-- 2、人员信息表格区 -->
    <div class="common-info">
      <div class="common-info-title">人员信息</div>
    </div>
    <el-table max-height="calc(100vh - 256px)" :data="personnelList" border style="width: 100%">
      <!-- 2.1、表格列 -->
      <el-table-column prop="realName" label="姓名" header-align="center" align="center" min-width="90" />
      <el-table-column prop="salary" label="工资金额" header-align="center" align="center" min-width="90">
        <template #default> {{ detail.salaryStr }} </template>
      </el-table-column>
      <el-table-column prop="paymentType" label="打款方式" header-align="center" align="center" min-width="90" />
      <el-table-column prop="bankCard" label="银行卡号" header-align="center" align="center" min-width="90" />
      <el-table-column prop="idCard" label="身份证号" header-align="center" align="center" min-width="90" />
      <el-table-column prop="mobile" label="联系方式" header-align="center" align="center" min-width="90" />
      <el-table-column prop="isAccept" label="是否接受任务" header-align="center" align="center" min-width="90">
        <template #default="{ row }">
          <div v-if="row.isAccept === ACCEPT_STATUS.ACCEPTED">
            <el-tag type="primary">{{ acceptStatusObj[ACCEPT_STATUS.ACCEPTED].name }}</el-tag>
          </div>
          <div v-else-if="row.isAccept === ACCEPT_STATUS.DENY">
            <el-tag type="danger">{{ acceptStatusObj[ACCEPT_STATUS.DENY].name }}</el-tag>
          </div>
          <div v-else-if="row.isAccept === ACCEPT_STATUS.PENDING">
            <el-tag type="info">{{ acceptStatusObj[ACCEPT_STATUS.PENDING].name }}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="workTime" label="可工作时间" header-align="center" align="center" min-width="110" />
      <el-table-column prop="refuseReason" label="拒绝原因" header-align="center" align="center" min-width="110" />
      <!-- <el-table-column prop="transmit" label="转交任务" header-align="center" align="center" min-width="90" /> -->

      <!-- 2.2、操作列 -->
      <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
        <template v-slot="scope">
          <el-button type="primary" v-if="hasPermission('assess:assesstaskissue:save')" :disabled="distributeIsDisabled(scope.row)" link @click="onDistribute(scope.row)">下发任务</el-button>
          <!-- <el-button type="primary" v-if="hasPermission('assess:assesstask:transmit')" link @click="onTransmit(scope.row)">转交</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <!--3、测评点位 -->
    <div class="common-info" style="margin-top: 24px">
      <div class="common-info-title">测评点位</div>
    </div>
    <el-tabs @tab-click="onTabClick" v-model="activePersonId">
      <el-tab-pane v-for="item in acceptedPersonList" :key="item.id" :label="item.realName" :name="item.id"></el-tab-pane>
    </el-tabs>

    <el-table max-height="500px" :data="pointList" border style="width: 70%">
      <!-- 2.1、表格列 -->
      <el-table-column prop="villageName" label="点位名称" header-align="center" align="center" min-width="90" />
      <el-table-column prop="areaName" label="区域" header-align="center" align="center" min-width="90" />
      <el-table-column prop="villageType" label="点位类别" header-align="center" align="center" min-width="90" />
      <el-table-column prop="lng" label="经度" header-align="center" align="center" min-width="90" />
      <el-table-column prop="lat" label="纬度" header-align="center" align="center" min-width="90" />
    </el-table>

    <div class="common-footer" :class="{ collapseSidebar: store.state.collapseSidebar }">
      <el-button type="info" size="large" plain @click="onBack">返回</el-button>
      <el-button v-if="hasPermission('assess:assesstaskissue:monitor')" type="primary" size="large" @click="onMonitor">任务监测</el-button>
    </div>

    <!-- 弹窗, 下发任务 -->
    <distributeTaskDialog ref="distributeTaskRef" @refreshDataList="getTaskDetail" />

    <!-- 弹窗, 转交任务 -->
    <!-- <transmitTaskDialog ref="transmitTaskRef" /> -->
  </div>
</template>

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { ref, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import baseService from "@/service/baseService";
import distributeTaskDialog from "./components/distributeTaskDialog.vue";
import transmitTaskDialog from "./components/transmitTaskDialog.vue";
import { useI18n } from "vue-i18n";
import { useAppStore } from "@/store";
import { statusList, salaryTypeList, ACCEPT_STATUS, acceptStatusObj, acceptStatusList } from "../type";
import { checkPermission } from "@/utils/utils";

const router = useRouter();
const route = useRoute();
const store = useAppStore();

const hasPermission = (key: string) => {
  return checkPermission(store.state.permissions as string[], key);
};

const distributeIsDisabled = computed(() => {
  return (row: any) => {
    return row.isAccept !== ACCEPT_STATUS.ACCEPTED || row.taskIssueDTO !== null;
  };
});

// 获取任务详情
const isLoading = ref(true);
const detail = ref<{ [x: string]: any }>({}); // 详情数据
const activePersonId = ref(""); // 当前人员点位
const pointList = ref<any[]>([]); // 当前人员点位列表
const personnelList = ref<any>([]); // 当前测评人员列表
const acceptedPersonList = ref<any>([]); // 当前接受任务的测评人员列表
const getTaskDetail = () => {
  baseService
    .get(`/assess/assesstask/${route.query.id}`)
    .then((res) => {
      const { assessUserDTOS, status, salary, salaryType } = res.data;
      const findStatus = statusList.find((item) => item.id === status);
      const findSalaryType = salaryTypeList.find((item) => item.id === salaryType);

      detail.value = {
        ...res.data,
        statusStr: findStatus ? findStatus.name : "-",
        salaryStr: `${salary}${findSalaryType ? "/" + findSalaryType.name : ""}`
      };

      personnelList.value = (assessUserDTOS || [])?.map((item: { taskUserDTO: any; paymentType: number }) => {
        const { isAccept, workTime, refuseReason } = item.taskUserDTO || {};
        const findAccept = acceptStatusList.find(({ id }) => id === isAccept);
        return {
          ...item,
          isAccept,
          refuseReason,
          workTime,
          paymentType: item.paymentType || "银行卡",
          acceptStr: findAccept ? findAccept.name : "-"
        };
      });
      acceptedPersonList.value = personnelList.value.filter((item: { isAccept: ACCEPT_STATUS }) => item.isAccept === ACCEPT_STATUS.ACCEPTED);
      pointList.value = acceptedPersonList.value[0]?.assessPointDTOList || [];
      activePersonId.value = acceptedPersonList.value[0].id + "";
      isLoading.value = false;
    })
    .catch(() => {
      isLoading.value = false;
    });
};
getTaskDetail();

const onTabClick = (tab: { index: string }) => {
  pointList.value = acceptedPersonList.value[+tab.index]?.assessPointDTOList || [];
};

// 下发
const distributeTaskRef = ref();
const onDistribute = (row?: any) => {
  row.taskId = detail.value.id;
  distributeTaskRef.value.init(row);
};

// 转交
const transmitTaskRef = ref();
const onTransmit = (row?: any) => {
  transmitTaskRef.value.init(row);
};

const onBack = () => {
  router.go(-1);
};
const onMonitor = () => {
  router.push({
    path: "/task/monitor",
    query: {
      taskId: detail.value.id
    }
  });
};

defineExpose({
  ACCEPT_STATUS
});
</script>
<style lang="less" scoped></style>
